import React from 'react';
import { connect } from 'react-redux';

import { Result, List } from 'antd-mobile';

import { logout } from '@/redux/modules/chatuser';

@connect(
    state => ({user: state.user.userInfo}),
    { logout }
)
class Me extends React.Component{
    render(){
        const user = this.props.user,
              Item = List.Item;
        
        return (<div>
            {
                user.id ? (<div>
                    <Result
                        img={<img src={require(`@/component/avatarselector/img/${user.detail.tx}.png`)} alt="" />}
                        title={user.userName} 
                    />
                    <List
                    renderHeader={()=>'简介 '} >
                        <Item
                            multipleLine
                        >
                            {user.detail.zw}<br />
                            {user.detail.jj.split('\n').map((v, i) => {
                               return <p key={i}>
                                {
                                    v
                                }
                                </p>
                            })}
                            <p>
                                {
                                    user.detail.m ? user.detail.m : null
                                }
                            </p>
                        </Item>
                    </List>
                    <List>
                        <Item onClick={() => {
                            this.props.logout();
                        }}>
                           退出登录
                        </Item>
                    </List>
                </div>) : '加载中'
            }
        </div>);
    }
}

export default Me;